<script lang="ts" setup>
import { ref } from 'vue'

const activeName = ref('/')

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
    <div class="container">
        <el-affix target=".container" :offset="0">
            <el-menu
                :default-active="activeName"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                :router="true"
                @select="handleSelect"
            >
                <el-menu-item index="/">常用网站</el-menu-item>
                <el-menu-item index="/about">学习任务</el-menu-item>
                <el-menu-item index="3">生活娱乐</el-menu-item>
                <el-menu-item index="4">作品展示</el-menu-item>
                <el-menu-item index="5">时光隧道</el-menu-item>
            </el-menu>
        </el-affix>
        <el-row :gutter="10">
            <el-col :span="2"/>
            <el-col :span="20">
                <router-view></router-view>

                
            </el-col>
            <el-col :span="2"/>
        </el-row> 
        <el-affix position="bottom" :offset="0">
            <div class="footer">
                <a target="_blank" href="https://beian.miit.gov.cn/">京ICP备20003354号-2</a>
                <a target="_blank" 
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011202004627" 
                    style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                    <img style="float:left;" src="./assets/record.png" />
                    <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11011202004627号</p>
                </a>
            </div>
        </el-affix> 
    </div>
</template>
  
<style lang="scss">
.container {
    width: 100%;
    overflow-x: hidden;
    .footer {
        display: flex;
        justify-content: center;
        background-color: white;
        width: 100%;
    }
}

.tabs {
    background-color: white;
}
</style>
  